/* eslint-disable no-debugger */
/* eslint-disable react/prop-types */
import React from 'react';
import { Form, Input, TreeSelect, Button, Switch, message } from 'antd';
import Api from '@/api/index'
import { withRouter } from 'react-router-dom';

const { TextArea } = Input;
const { TreeNode } = TreeSelect;

class StructForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            treeData: []
        };
    }

    componentDidMount() {
        //获取列表
        this.getList()
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                const { status, ...other } = values;
                Api.createStruct({ ...other, status: status ? 1 : 0 }).then(res => {
                    if (res.code == 200) {
                        message.success('保存成功');
                        this.props.history.push({ pathname: '/system/struct' })
                    }
                })
            }
        });
    };
    //组织机构列表
    getList = () => {
        Api.getStructList().then(res => {
            if (res.code == 200) {
                this.setState({ treeData: res.data.result })
            }
        })
    }
    renderTree = (treeData) => {
        return treeData.map((item) => {
            if (item.children && Array.isArray(item.children)) {
                return (
                    <TreeNode title={item.name} key={item.id} value={item.id}>
                        {this.renderTree(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode title={item.name} key={item.id} value={item.id} />;
        });
    }

    //上级机构
    onPidChange = value => {
        const { setFieldsValue } = this.props.form;
        setFieldsValue({ pid: value[0] })
    };
    render() {
        const { getFieldDecorator } = this.props.form;
        const { treeData } = this.state;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 20 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };
        const noLable = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 20,
                    offset: 4,
                },
            }
        }
        return (
            <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                <Form.Item label="上级机构">
                    {getFieldDecorator('pid', {
                    })(<TreeSelect
                        style={{ width: '80%' }}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="请选择所属机构"
                        allowClear
                        treeDefaultExpandAll
                        onChange={this.onPidChange}
                    >
                        {this.renderTree(treeData)}
                    </TreeSelect>)}
                    <span style={{ color: '#787878', paddingLeft: '12px' }}>默认根节点</span>
                </Form.Item>
                <Form.Item label="机构名称">
                    {getFieldDecorator('name', {
                        rules: [
                            {
                                required: true,
                                message: '请输入机构名称',
                            },
                        ],
                    })(<Input />)}
                </Form.Item>
                <Form.Item label="机构编码">
                    {getFieldDecorator('code', {
                        rules: [
                            {
                                required: true,
                                message: '请输入机构编码',
                            },
                        ],
                    })(<Input placeholder="机构编码" />)}
                </Form.Item>
                <Form.Item label="机构类型">
                    {getFieldDecorator('type', {})(<Input placeholder="机构类型" />)}
                </Form.Item>
                <Form.Item label="归属区域">
                    {getFieldDecorator('area', {

                    })(<Input placeholder="所属区域" style={{ width: '300px' }} />)}
                </Form.Item>
                <Form.Item style={{ marginTop: '-15px' }} {...noLable}>
                    {getFieldDecorator('detail', {

                    })(<Input placeholder="详细地址" />)}
                </Form.Item>
                <Form.Item label="机构状态">
                    {getFieldDecorator('status', { valuePropName: 'checked' })(<Switch />)}
                </Form.Item>
                <Form.Item label="备注">
                    {getFieldDecorator('note', {})(<TextArea row={4} placeholder="备注" />)}
                </Form.Item>
                <Form.Item {...tailFormItemLayout} style={{ marginTop: '30px', textAlign: 'center' }}>
                    <Button className="submit_btn" type="default">取消</Button>
                    <Button className="submit_btn" type="primary" htmlType="submit">确定</Button>
                </Form.Item>
            </Form>
        );
    }
}

export default Form.create()(withRouter(StructForm));
